import { useState } from 'react'
import { Input, Button, message } from 'antd'
import s from "./index.module.less";

function App(): JSX.Element {

  const [config, setConfig] = useState<any>({
    path: '',
    v1: '',
    v2: '',
  })

  return (
    <div className={s.box}>
      <h1>文本替换</h1>
      <div>
        <p>请输入要搜索的路径:</p>
        <div className='flex'>
          <Input
            spellCheck="false"
            size='small'
            value={config.path}
            onChange={(e) => {
              const c = {
                ...config
              }
              c.path = e.target.value
              setConfig(c)
            }}
          />

          <div className='file-box'>
            <Button size='small' type='primary' onClick={() => {
              const c = {
                ...config
              }
              c.path = window.api.syncOperationWindow('selectDirectory')
              setConfig(c)
            }}>浏览</Button>
          </div>
        </div>
      </div>

      <div>
        <p>请输入查找内容:</p>
        <Input spellCheck="false" size='small' placeholder="" onChange={(e) => {
          const c = {
            ...config
          }
          c.v1 = e.target.value
          setConfig(c)
        }} />
      </div>

      <div>
        <p>请输入替换内容:</p>
        <Input spellCheck="false" size='small' placeholder="" onChange={(e) => {
          const c = {
            ...config
          }
          c.v2 = e.target.value
          setConfig(c)
        }} />
      </div>
      
      <Button type='primary' onClick={async () => {
        const isTure = await window.api.tihuan(config)
        if (isTure) {
          message.success('修改成功')
        }
      }}>确定</Button>
    </div>
  )
}

export default App
